<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Vue Editor</title>
	<script src="../ckeditor.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/axios.js"></script>

	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>

	<style>
		.editor-container{
			width: 600px;
			position: relative;
			float: left;
		}
		.preview{
			width: 400px;
			height: 700px;
			position: relative;
			float: left;
			margin: 20px;
		}
	</style>
</head>
<body>

<script type="text/x-template" id="editor">
<div>
	<div ref="editor"></div>
</div>
</script>
<script>
	var Editor = {
		template: '#editor',
		props: ['value'],
		data() {
			return {
				content: '',
				editor: null
			}
		},
		mounted() {
			this.content = this.value;
			this.$refs.editor.innerHTML = this.content;
			this.init()
		},
		methods: {
			init() {
				if (this.editor) return;
				this.editor = CKEDITOR.replace(this.$refs.editor, {
					filebrowserUploadUrl: './upload.php?time='+Date.now(),
					tokenHandler: function (file, next) {
						axios.get('oss.php').then(function (res) {
							console.log(res);
							next(res.data);
						});
					}
				});
				this.editor.on('fileUploadResponse', evt => {
					console.log(evt);
					var content = this.editor.getData(null);
					this.setContent(content);
				});
				this.editor.on('change', e => {
					var content = this.editor.getData(null);
					this.setContent(content);
				});
				this.editor.on('blur', e => {
					var content = this.editor.getData(null);
					this.setContent(content);
				})
			},
			setContent(content) {
				this.content = content;
				this.$emit('input', content);
			}
		}
	};
</script>

<div id="app">

	<div class="editor-container">
		<div>
			<button @click="openPreview">打开预览</button>
		</div>
		<Editor v-model="content"></Editor>
	</div>

	<div class="preview" v-show="preview">
		<div class="page">
			<header class="bar bar-nav">
				<a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
					<span class="icon icon-left"></span>
					返回
				</a>
				<h1 class="title">我的生活</h1>
			</header>
			<nav class="bar bar-tab">
				<a class="tab-item active" >
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item" >
					<span class="icon icon-me"></span>
					<span class="tab-label">我</span>
				</a>
				<a class="tab-item" >
					<span class="icon icon-star"></span>
					<span class="tab-label">收藏</span>
				</a>
				<a class="tab-item" >
					<span class="icon icon-settings"></span>
					<span class="tab-label">设置</span>
				</a>
			</nav>
			<div class="content" v-html="content">
				<!-- 这里是页面内容区 -->
			</div>
		</div>
	</div>
</div>
<script>
	var app = new Vue({
		el: '#app',
		components: {Editor},
		data: {
			content: '',
			preview: false
		},
		mounted: function () {
//			this.preview = true;
		},
		methods: {
			openPreview() {
				this.preview = true;
			}
		}
	})
</script>
</body>
</html>
